<template>
  <div>
    <div class="recommend-container">
      <div class="recommend-header border-bottom">去哪儿推荐</div>
      <ul>
        <li
          class="recommend-list border-bottom"
          v-for="item in recommendList"
          :key="item.id"
          @click="handleIntroduceShow"
        >
          <div class="recomment-title border-right">
            <p>{{item.title}}</p>
            <span class="recommend-tips" v-for="(tiptext, index) in item.tips" :key="index">
              <span class="iconfont recommend-icon" v-html="tiptext.icon"></span>
              {{tiptext.text}}
            </span>
          </div>
          <div class="recommend-price">
            <div class="recommend-price-con">
              <p class="recommend-price-table">
                <span style="font-size:.24rem">￥</span>{{item.price}}
              </p>
              <button class="recommend-price-button">预订</button>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="intro-mask"
       v-if="this.introduceShow"
       @click="handleIntroduceClose"
    ></div>
    <common-fadein>
      <recommend-introduce
        v-if="this.introduceShow"
        @close="handleIntroduceClose"
      ></recommend-introduce>
    </common-fadein>
  </div>
</template>

<script>
import RecommendIntroduce from './recommend/instroduce'
import CommonFadein from 'common/fadein/fadein'
export default {
  name: 'DetailRecommend',
  components: {
    RecommendIntroduce,
    CommonFadein
  },
  props: {
    recommendList: Array
  },
  data () {
    return {
      introduceShow: false
    }
  },
  methods: {
    handleIntroduceClose () {
      this.introduceShow = false
    },
    handleIntroduceShow () {
      this.introduceShow = true
    }
  }
}
</script>

<style lang="stylus" scoped>
  .border-bottom
  &:before
   border-color: #666;
  .border-right
  &:before
   border-color: #666;
  .intro-mask
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .4);
  .recommend-container
    background: #fff;
    padding: 0 .2rem;
    margin-bottom: .2rem;
    .recommend-header
      background: url('');
      background-repeat: no-repeat;
      background-size: .36rem .36rem;
      background-position: 0 center;
      text-indent: .36rem;
      padding: 0 .2rem;
      height: .88rem;
      line-height: .88rem;
      font-size: .32rem;
      color: #333;
    .recommend-list
      display: flex;
      padding: .2rem .2rem .24rem 0;
      .recomment-title
        flex: 2.92;
        margin-right: .1rem;
        line-height: .52rem;
        font-size: .3rem;
        font-family: tahoma,arial,"Hiragino Sans GB","\5FAE\8F6F\96C5\9ED1",simsun,sans-serif;
        .recommend-tips
          font-size: .24rem;
          line-height: .32rem;
          margin-right: .2rem;
          .recommend-icon
            font-size: .2rem;
      .recommend-price
        flex: 1;
        display: flex;
        align-items: center;
        .recommend-price-con
          width: 100%;
          padding-left: .2rem;
          .recommend-price-table
            color: #ff9800;
            display: block;
            line-height: .28rem;
            text-align: center;
            font-size: .36rem;
          .recommend-price-button
            height: .6rem;
            background: #ff9800;
            width: 100%;
            border-radius: .06rem;
            line-height: .6rem;
            color: #fff;
            font-weight: bold;
</style>
